<template>
  <div>
    <div class="me-basic">
      <div class="item-title">
        <span class="title-text">基本信息</span>
        <span class="redact-text" @click="toRedactMe">编辑</span>
      </div>
      <div class="me-content" v-if="sex">
        <div class="me-item">
          <span class="item-lable">昵称</span>
          <span class="item-value">{{nickname}}</span>
        </div>
        <div class="me-item">
          <span class="item-lable">生日</span>
          <span class="item-value">{{birthType}}{{birthday}}</span>
        </div>
        <div class="me-item">
          <span class="item-lable">性别</span>
          <span class="item-value">{{sex}}</span>
        </div>
        <div class="me-item" v-if="certificateList.length!=0">
          <span class="item-lable">证书</span>
          <span class="item-value certificate-content">
            <span class="certificate" v-for="(item, key) in certificateList" :key="key+'certificateList'">
              <img  class="me-picture" :src="item.url" @click="bigPhotoLog(item.url)">
              <span class="img-text">{{item.type}}</span>
            </span>
            
          </span>
        </div>
      </div>
      <div class="me-null" v-if="!sex">
        <span>
          <img src="static/ziliankong.png">
        </span>
        <span class="me-null-text">什么都没有~</span>
      </div>
    </div>
    <div class="me-contact">
      <div class="item-title">
        <span class="title-text">联系方式</span>
        <span class="redact-text" @click="toRedactMe">编辑</span>
      </div>
      <div class="me-content">
        <div class="me-item" v-if="picture && picture!='static/add.png'">
          <span class="item-lable">照片</span>
          <span class="item-value">
            <img class="me-picture" :src="picture" @click="bigPhotoLog(picture)">
          </span>
        </div>
        <div class="me-item" v-if="name">
          <span class="item-lable">真实姓名</span>
          <span class="item-value">{{name}}</span>
        </div>
        <div class="me-item" v-if="email">
          <span class="item-lable">常用邮箱</span>
          <span class="item-value">{{email}}</span>
        </div>
        <div class="me-item" v-if="phone">
          <span class="item-lable">手机号码</span>
          <span class="item-value">{{phone}}</span>
        </div>
        <div class="me-item" v-if="idCard">
          <span class="item-lable">身份证号码</span>
          <span class="item-value">{{idCard}}</span>
        </div>
        <div class="me-item" v-if="QQ">
          <span class="item-lable">QQ号码</span>
          <span class="item-value">{{QQ}}</span>
        </div>
      </div>
      
    </div>
    <div class="me-school">
      <div class="item-title">
        <span class="title-text">学校信息</span>
        <span class="redact-text" @click="toRedactMe">编辑</span>
      </div>
      <div class="me-content" v-if="school">
        <div class="me-item">
          <span class="item-lable">城市</span>
          <span class="item-value">{{city}}</span>
        </div>
        <div class="me-item">
          <span class="item-lable">学校名称</span>
          <span class="item-value">{{school}}</span>
        </div>
        <div class="me-item">
          <span class="item-lable">学院名称</span>
          <span class="item-value">{{college}}</span>
        </div>
        <div class="me-item">
          <span class="item-lable">专业</span>
          <span class="item-value">{{major}}</span>
        </div>
        <div class="me-item">
          <span class="item-lable">年级</span>
          <span class="item-value">{{grade}}</span>
        </div>
        <div class="me-item">
          <span class="item-lable">学历</span>
          <span class="item-value">{{education}}</span>
        </div>

        
        <div class="me-item" v-if="curriculumList.length!=0">
          <span class="item-lable">课表</span>
          <span class="item-value certificate-content">
            <span class="certificate" v-for="(item, key) in curriculumList" :key="key+'curriculumList'">
              <img  class="me-picture" :src="item.picture" @click="bigPhotoLog(item.picture)">
              <span class="img-text">{{item.semester}}</span>
            </span>
          </span>
        </div>
        <div class="me-item" v-if="projectCycle">
          <span class="item-lable">可接受项目周期</span>
          <span class="item-value">{{projectCycle}}</span>
        </div>
      </div>
      <div class="me-null" v-if="!school">
        <span>
          <img src="static/ziliankong.png">
        </span>
        <span class="me-null-text">什么都没有~</span>
      </div>
    </div>

    <el-dialog class="big-photo-log" title="" :visible.sync="bigPhoto" center element-loading-background="rgba(0, 0, 0, 0.4)" >
        <div class="big-photo-content">
          <img :src="bigPhotoSrc">
        </div>
      </el-dialog>
  </div>
</template>

<style lang="stylus" scoped>
@import '~style/base.styl';

.big-photo-content{
  // padding: 30px;
  img{
    display: block;
    margin 0 auto;
    // width:800px;
    height:560px;
  }
} 
.me-picture{
  width:164px;
  height:164px;
  display: block;
  cursor: pointer;
}
.me-basic,.me-content,.me-school{
  background:rgba(255,255,255,1);
  margin-bottom: 30px;
  box-shadow:0px 1px 2px 0px rgba(0,0,0,0.08);
  border-radius:4px;
}
.item-title{
  background:rgba(255,255,255,1);
  height:64px;
  position: relative;
  text-align: left;
  border-bottom: 1px solid rgba(238,238,238,1);
  span{
    display: inline-block;
  }
  .title-text{
    font-size:16px;
    color:rgba(32,32,32,1);
    line-height:16px;
    padding-top: 24px;
    padding-left: 20px;
    cursor: pointer;  
  }
  .redact-text{
    color:rgba(255,255,255,1);
    padding: 9px 30px;
    position: absolute;
    right: 20px;
    top: 16px;
    cursor: pointer;
    border-radius:2px;
    background: $color-person-btn;
  }
}
.me-content{
  padding: 30px 20px;
  .me-item:last-child{
    margin-bottom: 0;  
  }
}
.me-item{
  font-size: 0;
  margin-bottom: 30px;
  vertical-align: top;
  .item-lable{
    vertical-align: top;
    display: inline-block;
    box-sizing: border-box;
    width:144px;
    padding: 15px 20px;
    background:rgba(255,255,255,1);
    text-align: right;
    font-size:14px;
    color:rgba(164,164,164,1);
  }
  .item-value{
    display: inline-block;
    padding: 15px 20px;
    font-size:14px;
    color:rgba(32,32,32,1);
  }
}
.me-null{
  text-align: center;
  padding: 60px 0;
  font-size: 0;
  span{
    display: inline-block;
    vertical-align: top; 
  }
  .img{
    width:82px;
    height:162px;
  }
  .me-null-text{
    margin-left:40px;
    padding-top: 71px;
    font-size:16px;
    color:rgba(164,164,164,1);  
  } 
}
.certificate-content{
  width: 776px;
  padding-bottom: 0 !important;
  font-size: 0;
  .certificate{
    display: inline-block;
    position: relative;
    margin-right: 30px;
    margin-bottom: 30px;
    .img-text{
      font-size: 12px;
      color:rgba(255,255,255,1);
      position: absolute;
      bottom: 0;
      height: 40px;
      width: 164px;
      background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(255,255,255,0.3));
      opacity: 0.5;
      line-height: 40px;
      text-align: center;
    }
  }
}
</style>

<script>

import { mapGetters, mapActions } from 'vuex'
import VueUploadComponent from 'vue-upload-component'
import calendar from 'api/calendar';
import {
  fileUpload,
  userInfo,
  updateInfo,
  checkNickName,
  checkInfoSave,
  checkEmail,
  emailSend,
  getMinusTime,
  uploadBase64,
  findMyPack
} from "api/getData";
export default {
  props: ["userD"],
  data(){
    return{
      bigPhoto: false,
      bigPhotoSrc: '',
      QQ: '',
      avatar: '',
      birthType: '',
      birthday: '',
      city: '',
      cityName: '',
      college: '',
      education: '',
      email: '',
      grade: '',
      idCard: '',
      identity: '',
      major: '',
      name: '',
      nickname: '',
      phone: '',
      picture: '',
      school: '',
      schoolKey: '',
      sex: '',
      projectCycle: '',
      schoolList: [],
      collegeList: [],
      majorList: [],
      certificateList: [],
      curriculumList: []
    }
  },
  computed: {
    ...mapGetters(["cityList"])
  },
  created() {
    // findMyPack(126).then(res=>{
    //   console.log(res)
    // })
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      let that = this;
      let loading = await this.getLoading()
      await userInfo(that.userD.type, that.userD.cluesOrStuId.toString(), that.cityId).then(data => {
        let info = data.info;
        this.QQ = info.QQ;
        this.name = info.name;
        this.nickname = info.nickname;
        this.picture = info.picture;
        this.cityName = info.cityName;
        this.grade = info.grade;
        this.email = info.email;
        
        if(info.projectCycle == '0'){
          this.projectCycle = '长期'
        }else if(info.projectCycle == '1'){
          this.projectCycle = '短期'
        }else{
          this.projectCycle = ''
        }
        this.city = info.cityName
        if(info.sex == '0'){
          this.sex = '男'
        }else if(info.sex == '1'){
          this.sex = '女'
        }

        if(info.phone){
          let phone3 = info.phone.slice(0,3).toString()
          let phone4 = info.phone.slice(7).toString()
          this.phone =  phone3 +'****'+ phone4
        }

        if(info.idCard){
          let idCard3 = info.idCard.slice(0,4).toString()
          let idCard4 = info.idCard.slice(info.idCard.length - 4).toString()
          this.idCard =  idCard3 +'****'+ idCard4
        }
        //学历
        for(let i=0;i<data.educationList.length;i++){
          if(info.education == data.educationList[i].value){
            that.education = data.educationList[i].label
          }
        }
        //学校list
        for(let i=0;i<this.cityList.length;i++){
          if(info.city == this.cityList[i].id){
            this.schoolList = this.cityList[i].localAreas
          }
        }
        //学校
        if(this.schoolList){
          for(let i=0;i<this.schoolList.length;i++){
            if(info.school == this.schoolList[i].id){
              this.school = this.schoolList[i].area
              this.collegeList = this.schoolList[i].institutes
            }
          }
        }
        //学院
        if(this.collegeList){
          for(let i=0;i<this.collegeList.length;i++){
            if(info.college == this.collegeList[i].id){
              this.college = this.collegeList[i].instituteName
              this.majorList = this.collegeList[i].majors
            }
          }
        }
        
        //专业
        if(this.majorList){
          for(let i=0;i<this.majorList.length;i++){
            if(info.major == this.majorList[i].id){
              this.major = this.majorList[i].majorName
              //this.majorList = this.collegeList[i].majors
            }
          }
        }
        if(info.city == '-1'){
          this.city = '其他'
        }
        if(info.school == '-1'){
          this.school = '其他'
        }
        if(info.college == '-1'){
          this.college = '其他'
        }
        if(info.major == '-1'){
          this.major = '其他'
        }
        let bir = info.birthday.split('/');
        if(!info.birthType || info.birthType == 0){
          //console.log('birtepe:',info.birthType)
          this.birthType = '【公历】';
          if(bir.length >2){
            this.birthday = bir[0] + '年' + Number(bir[1]) + '月' + Number(bir[2]) + '日'
          }
        }else{
          this.birthType = '【农历】';
          if(bir.length > 2){
            let b = calendar.solar2lunar(bir[0],bir[1],bir[2]);
            this.birthday = b.gzYear + b.cYear + b.IMonthCn +b.IDayCn
          }
        }
        if(data.certificateList){
          this.certificateList = data.certificateList;
        }
        if(data.schoolTimetableList){
          data.schoolTimetableList.forEach(item => {
            if(item.pictureOne){
              this.curriculumList.push({
                'picture': item.pictureOne,
                'semester': data.semesterList[item.semesterId].label,
                'orders': item.orders
              })
            }
            if(item.pictureTwo){
              this.curriculumList.push({
                'picture': item.pictureTwo,
                'semester': data.semesterList[item.semesterId].label,
                'orders': item.orders
              })
            }   
          })
        }
      })
      loading.close()

    },
    toRedactMe(){
      this.$router.push({
        path: '/meRedact'
      })
    },
    bigPhotoLog(photo, disabled){
      this.bigPhotoSrc = photo;
      this.bigPhoto = true; 
    }
  }
} 
</script>
